<!DOCTYPE html>
<html>
    <head>
        <title>Bui 框架 富文本编辑器 SSM框架开发</title>
        <meta charset="UTF-8">
        <meta name="keywords" content="富文本编辑器、树形列表、树形控件、树控件、手风琴、拾色器、多文件上传、弹窗组件、模态窗口、双向联动表单、右键菜单、jquery拖动、draggable、datagrid、tree、mvvm、combox、tab" />
        <meta name="description" content="Bui editor ui框架是一套前后端分离，包含富文本编辑器、双向联动表单、树形列表、树形控件、模态窗口、手风琴、拾色器、多文件上传、弹窗组件等全功能UI框架。还包括Spring mvc spring mybatis高效开发框架" />
        <link rel="shortcut icon" href="/favicon.ico" />
        <link rel="bookmark" href="/favicon.ico" />
        <meta name="renderer" content="webkit|ie-stand" />
        <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/base.css" />
        <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/toolbar.css" />
        <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/panel.css" />
        <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/font/bui-fonts.min.css" />        
        <script type="text/javascript" src="../javascript/basic-2.0.0.js"></script>
        <script type="text/javascript" src="../javascript/toolbar-2.0.0.js"></script>
        <script type="text/javascript" src="../javascript/plugins-2.0.0.js"></script>
        <script type="text/javascript" src="../javascript/panel-2.0.0.js"></script>
        
        <style>
             body{
             box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
         }
        .ap{
            line-height: 200px;
        }
        </style>
</head>

<body>
    
    <div class="section-content">
        <h1 class="section-title">固定面板/浮动面板；远程内容加载/静态内容；面板工具栏配置(依赖toolbar)</h1>
        <div style="height:400px;width:100%" class="section-body clearfix">
            <div style="margin-bottom:5px;">
                <button type="button" onclick="load('iframe','test.html')">重新加载</button>
                <button type="button" onclick="updateContent()">更新静态内容</button>
                <button type="button" onclick="setTitle()">设置标题</button>
                <button type="button" onclick="flowPanel()" id="flowPanel">显示浮动面板</button>
                <button type="button" onclick="resize()" >resize</button>
            </div>
            <div style="height:380px;width:100%;" class="clearfix">
                <div style="height:100%;width: 48%;float: left; ">
                    <div id="panel1"></div>
                </div>                
            </div>
        </div>
    </div>
  
    <div id="panel"></div>


    <script type="text/javascript">
        function closed() {
            panel.close();
        }

        function flowPanel(){
            console.log("show panel ....");
            panel.show(()=>{
                console.log("on show ....");
            });
        }

        function load(f, url) {
            panel.load({
                url: url,
                dataType: f
            })
        }

        function updateContent() {
            panel.updateContent("<p>我是更新后的静态内容</p>");
        }

        function setTitle() {
            panel.setTitle({iconCls:' fa-ok-circle',title:"this is a new title"});
        }

        function resize() {
            panel.resize({
                width: 500,
                height: 250
            });
        }

        var panel;
        function pageLoaded() {
             new $B.Panel("#panel1", {
                size:{width:'100%',height:'200'},
                title: '<span><span style="color:red">公告文件</span>面板公告文件面板公告文件面板公告文件面板公告文件面板公告文件面板公告文件面板</span>', //标题
                iconCls: 'fa-mail', //图标cls，对应icon.css里的class
                iconColor:'#0034FA',
                shadow: false, //是否需要阴影
                radius: false, //是否圆角
                header: true, //是否显示头部
               // closeType:'destroy',
                content: '<div><p>1、功能完备，api丰富，方便集成的的Panel UI组件！！</p><p>1、功能完备，api丰富，方便集成的的Panel UI组件！！</p><p>1、功能完备，api丰富，方便集成的的Panel UI组件！！</p><p>1、功能完备，api丰富，方便集成的的Panel UI组件！！</p><p>1、功能完备，api丰富，方便集成的的Panel UI组件！！</p><p>1、功能完备，api丰富，方便集成的的Panel UI组件！！</p><p>1、功能完备，api丰富，方便集成的的Panel UI组件！！</p><p>1、功能完备，api丰富，方便集成的的Panel UI组件！！</p><p>1、功能完备，api丰富，方便集成的的Panel UI组件！！</p><p>1、功能完备，api丰富，方便集成的的Panel UI组件！！</p><p>1、功能完备，api丰富，方便集成的的Panel UI组件！！</p><p>1、功能完备，api丰富，方便集成的的Panel UI组件！！</p></div>',
                url:'',
                dataType: 'html', //当为url请求时，html/json/iframe
                draggable: false, //是否可以拖动
                moveProxy: false, //是否产生一个可移动的空div代理
                closeable: true, //是否关闭
                expandable: true, //可左右收缩
                maxminable: false, //可变化小大
                collapseable: true, //上下收缩
                resizeable:false,//右下角拖拉大小
                onLoaded: function () { //加载后
                    console.log("onLoaded");
                },
                onClosed: function () { //关闭后
                    console.log("onClosed");
                },
                onExpanded:function(pr){
                    console.log("onExpanded " + pr);
                },
                onCollapsed: function (pr) { //上下收缩后
                    console.log("onCollapse " + pr);
                },
                onResized:function(pr){
                    console.log("onResized " + pr);
                }
            });
            panel = new $B.Panel("#panel", {
                size:{width:'300',height:'200'},
                title: '<span><span style="color:red">公告文件</span>浮动面板</span>', //标题
                iconCls: 'fa-mail', //图标cls，对应icon.css里的class
                iconColor:'#0034FA',
                shadow: true, //是否需要阴影
                radius: true, //是否圆角
                header: true, //是否显示头部
                //draggableHandler:'body',
                //closeType:'destroy',
               // content: '<div><p>1、功能完备，api丰富，方便集成的的Panel UI组件！！</p><p>1、功能完备，api丰富，方便集成的的Panel UI组件！！</p><p>1、功能完备，api丰富，方便集成的的Panel UI组件！！</p><p>1、功能完备，api丰富，方便集成的的Panel UI组件！！</p><p>1、功能完备，api丰富，方便集成的的Panel UI组件！！</p><p>1、功能完备，api丰富，方便集成的的Panel UI组件！！</p><p>1、功能完备，api丰富，方便集成的的Panel UI组件！！</p><p>1、功能完备，api丰富，方便集成的的Panel UI组件！！</p><p>1、功能完备，api丰富，方便集成的的Panel UI组件！！</p><p>1、功能完备，api丰富，方便集成的的Panel UI组件！！</p><p>1、功能完备，api丰富，方便集成的的Panel UI组件！！</p><p>1、功能完备，api丰富，方便集成的的Panel UI组件！！</p><p>1、功能完备，api丰富，方便集成的的Panel UI组件！！</p></div>',
                url:'fragment.html',
                dataType: 'html', //当为url请求时，html/json/iframe
                draggable: true, //是否可以拖动
                moveProxy: false, //是否产生一个可移动的空div代理
                closeable: true, //是否关闭
                expandable: true, //可左右收缩
                maxminable: true, //可变化小大
                collapseable: true, //上下收缩
                resizeable:true,//右下角拖拉大小
                onLoaded: function (res) { //加载后
                    console.log("onLoaded ");
                    console.log(res);
                    //$B.DomUtils.append()
                },
                onClosed: function () { //关闭后
                    console.log("onClosed");
                },
                onExpanded:function(pr){
                    console.log("onExpanded " + pr);
                },
                onCollapsed: function (pr) { //上下收缩后
                    console.log("onCollapse " + pr);
                },
                onResized:function(pr){
                    console.log("onResized " + pr);
                },
                toolbarStyle:{
                    style: 'min'
                },
                toolbar:[{
                    color: '#C16FF0',
                    text: '重新加载',
                    iconCls: 'fa-print',
                    click:function(){
                        panel.reload();
                    }
                },{
                    color: '#34E0B9',
                    text: '销毁',
                    iconCls: 'fa-male-1',
                    click:function(){
                        panel.destroy();
                    }
                }]
            });
            

        };
        var methodsObject = {
            test: function (pr) {
                alert(JSON.stringify(pr));
            }
        };
        $B.DomUtils.onDomLoaded(function () {
            pageLoaded();
        });
    </script>
</body>

</html>